<template>
  <view class="filter-item">
    <text class="font-item-text">职业</text>
    <view class="uni-input" @click="togglePopup">
      <template v-if="selectedProfessions.length > 0">
        <text class="range-text">{{ selectedProfessions.join(', ') }}</text>
      </template>
      <template v-else>请选择职业</template>
      <uni-icons :type="iconType" size="20" class="icon"></uni-icons>
    </view>
  </view>

  <view v-show="showPopupContent" class="popup-content">
    <view class="button-container">
      <button
        v-for="profession in professionOptions"
        :key="profession"
        :class="
          selectedProfessions.includes(profession) ||
          (profession == '不限' && selectedProfessions.length == 0)
            ? 'custom-button selected'
            : 'checkbox-label'
        "
        @click="() => changeProfession(profession)"
      >
        {{ profession == '' ? '不限' : profession }}
        <view
          v-if="
            selectedProfessions.includes(profession) ||
            (profession == '不限' && selectedProfessions.length == 0)
          "
          class="checkmark"
        ></view>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineEmits, watch } from 'vue'

const emit = defineEmits<{
  (e: 'update:professions', value: string[]): void
  (e: 'confirmProfessions'): void
}>()

const professionOptions = [
  '不限',
  '律师',
  '设计师',
  '客服人员',
  '服务员',
  '摄影师',
  '高层管理',
  '军人',
  '工程师',
  '市场/销售',
  '教师',
  '程序员',
  '空姐/空乘',
  '导游',
  '文员秘书',
  '公务员',
  '职业经理人',
  '医生',
  '幼师',
  '策划推广',
  '护士',
  '新媒体/记者',
  '行政人事',
  '机关干部',
  '消防员',
  '咨询师',
  '会计/财务',
  '技术人员',
  '经纪人',
  '办公室职员',
  '理财师',
  '体育工作者',
  '修理行业',
  '操作工',
  '厨师',
  '美容化妆师',
  '司机',
  '建筑行业',
  '采购',
  '模特/演员',
  '教练',
  '翻译',
  '学生',
  '私营业主',
  '自由职业者',
  '待业中',
  '其他',
]
const selectedProfessions = ref<string[]>([]) // 默认选择不限
const showPopupContent = ref(false)
const iconType = ref('arrowright')

const togglePopup = () => {
  showPopupContent.value = !showPopupContent.value
  iconType.value = showPopupContent.value ? 'up' : 'arrowright'
}

const changeProfession = (profession: string) => {
  if (profession == '不限') {
    selectedProfessions.value = []
  } else {
    let idx = selectedProfessions.value.indexOf(profession)
    if (idx == -1) {
      selectedProfessions.value.push(profession)
    } else {
      selectedProfessions.value.splice(idx, 1)
    }
  }
  emit('update:professions', selectedProfessions.value)
  emit('confirmProfessions')
}

// 监控 selectedProfessions 的变化并打印值
watch(selectedProfessions, (newVal) => {
  const formattedVal = Object.values(newVal)
  console.log('Updated professions:', formattedVal)
})
</script>

<style scoped>
.filter-item {
  font-size: 26rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  cursor: pointer;
  margin-bottom: 40rpx;
}
.font-item-text {
  color: #a9a5a3;
}

.uni-input {
  display: flex;
  align-items: center;
}

.range-text {
  color: #1e90ff;
}

.icon {
  color: #ccc;
  margin-left: 20rpx;
}

.popup-content {
  padding: 40rpx;
  background-color: #fff;
  width: 100%;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 20rpx;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx; /* 按钮之间的间距 */
}

.checkbox-label,
.custom-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.3333% - 8rpx); /* 每行三个按钮，并考虑间距 */
  padding: 0rpx;
  height: 80rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  margin: 4rpx 0; /* 上下间距为4rpx，总间距为8rpx */
}

.checkbox-label {
  border: 2rpx solid #ff0000;
  background-color: #f5f5f5;
  color: #666;
}

.custom-button {
  border: 2rpx solid #00a0e9;
  color: #00a0e9; /* 文字颜色 */
  background-color: #e5f7f9; /* 背景颜色 */
}

.custom-button.selected::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32rpx 24rpx 22rpx 20rpx;
  border-color: transparent rgb(1, 170, 190) rgb(1, 170, 190) transparent;
}

.custom-button.selected .checkmark::before {
  content: '✔';
  color: white;
  font-size: 32rpx;
  position: absolute;
  top: 50%;
  left: 63%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.custom-button .checkmark {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 28rpx;
  height: 28rpx;
  border-radius: 4rpx;
  text-align: center;
  line-height: 28rpx;
}
</style>
